<template>
	<view class="feedback-page">
		<view class="feedback-title">
			<text>问题和意见</text>
			<view class="feedback-quick" @tap="chooseMsg">
				<text>快速键入</text><iconfont icon="icon-bangzhuyufankui" class="feedback-quick-icon"></iconfont>
			</view>
		</view>
		<view class="feedback-body"><textarea placeholder="请详细描述你的问题和意见" v-model="feedbackData.content" class="feedback-textare" ></textarea></view>
		<view class="feedback-title" style="margin-top: 25rpx;"><text>QQ/邮箱</text></view>
		<view class="feedback-body"><input class="feedback-input" v-model="feedbackData.contact" placeholder="方便我们联系你" /></view>
		<button class="feedback-submit" @tap="onSubmit">提交</button>
	</view>
</template>

<script>
import feedBackService from '../../../api/feedback.js';
export default {
	components: {},
	data() {
		return {
			actionItemData: ['界面显示错乱', '启动太过漫长', '反应有点迟钝', '页面有点卡顿'],
			feedbackData: {
				content: '',
				contact: '',
				appVersion: '1.0.0'
			},
			systemInfo:{}
		};
	},
	onLoad() {
		const that = this;
		that.systemInfo = uni.getSystemInfoSync();
		//#ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
			that.feedbackData['appVersion'] = widgetInfo.version;
		});
		//#endif
	},
	methods: {
		//快速键入
		chooseMsg() {
			const that = this;
			uni.showActionSheet({
				itemList: that.actionItemData,
				success: res => {
					that.feedbackData.content += that.actionItemData[res.tapIndex];
				}
			});
		},
		//提交反馈数据
		onSubmit() {
			const that = this;
			if (that.$util.isEmpty(that.feedbackData.content)) {
				uni.showToast({
					title: '请填写反馈内容',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			//如果填写了联系方式，按就验证一下
			if (that.$util.isNotEmpty(that.feedbackData.contact)) {
				if (!that.$util.isEmail(that.feedbackData.contact)) {
					if (!that.$util.isQQ(that.feedbackData.contact)) {
						uni.showToast({
							title: '填写的QQ或邮箱格式不正确',
							icon: 'none',
							duration: 2000
						});
						return;
					}
				}
			}

			let submitData = {
				content: that.feedbackData.content,
				contact: that.feedbackData.contact,
				system: that.systemInfo.system,
				platform: that.systemInfo.platform,
				systemInfo: JSON.stringify(that.systemInfo),
				appVersion: that.appVersion
			};
			feedBackService.sendFeedback(submitData).then(res => {
				if (res.success) {
					uni.showToast({
						title: '感谢您的反馈',
						duration: 2000
					});
					that.feedbackData = {};
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.feedback-page {
	box-sizing: border-box;
	padding: 25rpx;
}
.input-view {
	font-size: 28rpx;
}
/*问题反馈*/
.feedback-title {
	padding:0;
	font-weight: bolder;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: $uni-font-size-lg;
}

.feedback-quick {
	position: relative;
	font-weight: normal;
	.feedback-quick-icon {
		font-size: 10rpx;
	}
}
.feedback-body {
	background: #ebebeb;
}
.feedback-textare {
	height: 200rpx;
	font-size: $uni-font-size-base;
	line-height: 50rpx;
	width: 100%;
	box-sizing: border-box;
	border: 1rpx solid #ebebeb;
	border-radius: 14px;
}
.feedback-input {
	font-size: $uni-font-size-base;
	height: 50rpx;
	min-height: 50rpx;
	padding: 15rpx 10rpx;
	line-height: 50rpx;
	border: 1rpx solid #ebebeb;
	border-radius: 14px;
}
.feedback-submit {
	background: #007aff;
	color: #fff;
	margin-top: 50rpx;
}
</style>
